<template>
  <div>
    <el-form :model="form" ref="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="8"> <div class="grid-content bg-purple"></div> </el-col>
        <el-col :span="8">
          <el-form-item label="用户名" prop="name"><el-input placeholder="请输入用户名" v-model="form.name" size="mini" style="width: 200px" /></el-form-item>
          <el-form-item label="密码" prop="password"> <el-input placeholder="请输入密码" v-model="form.password" size="mini" style="width: 200px" /> </el-form-item>
          <el-col style="text-align: center"> <el-button @click="doLogin()" size="mini">登录</el-button> </el-col>
        </el-col>
        <el-col :span="8"> <div class="grid-content bg-purple"></div> </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import Vue from "vue";
import { USER } from "@/common/Constant";
export default {
  data () {
    return {
      form: { name: "admin", /*用户名*/ password: "12345", /*密码*/ },
      rules: { name: [ { required: true, message: "请输入用户名", trigger: "blur" }, ], password: [ { required: true, message: "请输入密码", trigger: "blur" }, ], },
    };
  },
  methods: {
    /**登录*/
    doLogin() {
      this.$refs["form"].validate((valid) => {
        if (!valid) return;
        this.rq.post("/sys/login", this.form).then((res) => {
          if (res.code == 200) { 
            this.$message.success("登录成功!"); 
            Vue.ls.set(USER, res.data); 
            this.$emit("changeLogin", true);
          } else this.$message.error(res.msg);
        });
      });
    },
  },
};
</script>
<style scoped lang="scss">
.el-row { margin-bottom: 20px; &:last-child { margin-bottom: 0; } }
.el-col { border-radius: 4px; }
.bg-purple { background: white; }
.grid-content { border-radius: 4px; min-height: 86px; }
.row-bg { padding: 10px 0; background-color: #f9fafc; }
</style>
